<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="library/layui/css/layui.css">
  <link rel="stylesheet" href="report.css">
  <title>试压报告</title>
</head>

<body>
  <div id="report-content" class="layui-container">
    <div class="layui-row">
      <div class="layui-col-xs2 layui-col-sm2 layui-col-md2 title">
        YGBG-43
      </div>
      <div class="layui-col-xs10 layui-col-sm10 layui-col-md10 title last-right">
        <h2>管道试压报告</h2>
      </div>
    </div>
    <div class="layui-row">
      <div class="layui-col-xs2 layui-col-sm2 layui-col-md2 content">
        单位工程名称
      </div>
      <div id="project_name" class="layui-col-xs4 layui-col-sm4 layui-col-md4 content">
        --
      </div>
      <div class="layui-col-xs2 layui-col-sm2 layui-col-md2 content">
        工程编号
      </div>
      <div id="project_number" class="layui-col-xs4 layui-col-sm4 layui-col-md4 content last-right">
        --
      </div>
    </div>
    <div class="layui-row">
      <div class="layui-col-xs2 layui-col-sm2 layui-col-md2 content">
        桩号、区间
      </div>
      <div id="stake_mark" class="layui-col-xs4 layui-col-sm4 layui-col-md4 content">
        --
      </div>
      <div class="layui-col-xs2 layui-col-sm2 layui-col-md2 content">
        管材规格
      </div>
      <div id="pipe_specification" class="layui-col-xs4 layui-col-sm4 layui-col-md4 content last-right">
        --
      </div>
    </div>
    <div class="layui-row">
      <div class="layui-col-xs2 layui-col-sm2 layui-col-md2 content">
        设计压力
      </div>
      <div id="design_pressure" class="layui-col-xs4 layui-col-sm4 layui-col-md4 content">
        --
      </div>
      <div class="layui-col-xs2 layui-col-sm2 layui-col-md2 content">
        管道长度
      </div>
      <div id="pipe_length" class="layui-col-xs4 layui-col-sm4 layui-col-md4 content last-right">
        --
      </div>
    </div>
    <div class="layui-row">
      <div class="layui-col-xs2 layui-col-sm2 layui-col-md2 content">
        试压介质
      </div>
      <div id="medium" class="layui-col-xs4 layui-col-sm4 layui-col-md4 content">
        --
      </div>
      <div class="layui-col-xs2 layui-col-sm2 layui-col-md2 content">
        图纸档案号NO.
      </div>
      <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 content last-right">
        --
      </div>
    </div>
    <div class="layui-row">
      <div class="layui-col-xs2 layui-col-sm2 layui-col-md2 content">
        试压起止时间
      </div>
      <div id="date" class="layui-col-xs10 layui-col-sm10 layui-col-md10 content last-right">
        --
      </div>
    </div>
    <div class="layui-row">
      <div class="layui-row">
          <div class="layui-col-xs12 layui-col-sm12 layui-col-md12" style="text-align: center">
              <div class="content-title">试压曲线</div>
              <div style="background-color: #c2c2c2; padding: .1rem;">
                  <!-- <img id="chart_image" src="" style="width: 70%" crossOrigin="anonymous"> -->
                  <img src="" alt="" crossorigin="anonymous" class="imgs" style="width: 70%"/>
              </div>
          </div>
      </div>
  </div>
    
    <canvas id="myCanvas"></canvas>
    <div class="layui-row">
      <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
        <div id="result" class="content-title">结论：试压合格</div>
      </div>
    </div>
    <div class="layui-row">
      <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 signature">
        <div class="layui-row signature-row">
          试压负责人：
        </div>
        <div class="layui-row signature-row">
          日期：
        </div>
      </div>
      <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 signature">
        <div class="layui-row signature-row">
          监理单位：
        </div>
        <div class="layui-row signature-row">
          日期：
        </div>
      </div>
      <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 signature last-right">
        <div class="layui-row signature-row">
          建设单位：
        </div>
        <div class="layui-row signature-row">
          日期：
        </div>
      </div>
    </div>
    <div class="layui-row">
      <button id="export" type="button" class="layui-btn">导出</button>
    </div>
  </div>
</body>
<script src="library/jquery/jquery-3.7.1.min.js"></script>
<script src="library/html2canvas/html2canvas.min.js"></script>
<script>
  function domToPdfBase64(targetId, printOrientation) {
    var targetDom = document.getElementById(targetId); //你的目标元素id
    var copyDom = targetDom.cloneNode(true) // 克隆节点
    copyDom.style.width = targetDom.offsetWidth + 'px'
    copyDom.style.height = targetDom.scrollHeight + 'PX' // 获得高度
    document.body.appendChild(copyDom) // 插入节点
    html2canvas(copyDom).then((canvas) => {
        document.body.removeChild(copyDom) // 删除节点
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;
        //一页pdf显示html页面生成的canvas高度;
        var pageHeight = contentWidth / 595.28 * 841.89;
        //未生成pdf的html页面高度
        var leftHeight = contentHeight;
        //页面偏移
        var position = 0;
        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        var imgWidth = 595.28;
        var imgHeight = 595.28 / contentWidth * contentHeight;

        var pageData = canvas.toDataURL('image/jpeg', 1.0);
        //第一个参数： l：横向  p：纵向;第二个参数：测量单位（"pt"，"mm", "cm", "m", "in" or "px"）;第三个参数：可以是下面格式，默认为“a4”
        var pdf = new jsPDF(printOrientation, 'pt', 'a4');
        if (leftHeight < pageHeight) {
            // 在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；
            pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
        } else { // 分页
            while (leftHeight > 10) {
                pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
                leftHeight -= pageHeight;
                position -= 871.89;
                //避免添加空白页
                if (leftHeight > 10) {
                    pdf.addPage();
                }
            }
        }
        let pdf64 = pdf.output("datauristring").replace("data:application/pdf;base64,", "");

        console.log(pdf64);
        //pdf预览
        let blob = base64ToBlob(pdf64);
        //获取当前url，直接放到iframe就能用，下载同理。直接将blobURL放到浏览器可以预览
        let blobURL = window.URL.createObjectURL(blob);
        console.log(blobURL);
        return pdf64;
    })
}
</script>

</html>